<template>
    <div class="main_top">
        1111111111111
    </div>
  
  </template>
  
  <script>

      export default {
          name: 'test',
          data() {
              return {

  
  
              }
          },
      created() {

  
      },
      mounted() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');

  // 设置背景色为红色
  ctx.fillStyle = 'red';

  // 遍历数组中的每个对象
  this.arrays.forEach(obj => {
    // 绘制include部分
    ctx.beginPath();
    obj.include.forEach((point, index) => {
      if (index === 0) {
        ctx.moveTo(point.x, point.y);
      } else {
        ctx.lineTo(point.x, point.y);
      }
    });
    ctx.closePath();
    ctx.fill();

    // 绘制exclude部分
    ctx.fillStyle = 'white';
    obj.exclude.forEach((point, index) => {
      if (index === 0) {
        ctx.beginPath();
        ctx.moveTo(point.x, point.y);
      } else {
        ctx.lineTo(point.x, point.y);
      }
    });
    ctx.closePath();
    ctx.fill();
  });
}


      }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">

  
  
  
  
  
  </style>
  